@include('Admin.public.head')
<style>
    .admin-content .am-popup { max-height: 500px;}

</style>
<body>
@include('Admin.public.menu')
<div class=" admin-content" id="system">
  <div class="daohang">
    <ul>
      <li><button type="button" class="am-btn am-btn-default am-radius am-btn-xs"><a href="/admin">首页</a></button> </li>
      <li><button type="button" class="am-btn am-btn-default am-radius am-btn-xs">帮助中心<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close="">×</a></button></li>
      <li><button type="button" class="am-btn am-btn-default am-radius am-btn-xs">奖金管理<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close="">×</a></button></li>
      <li><button type="button" class="am-btn am-btn-default am-radius am-btn-xs">产品管理<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close="">×</a></button></li>
    </ul>
  </div>

<!--添加模态框-->
<div class="am-popup am-popup-inner" id="my-popup">
      <div class="am-popup-hd">
      <h4 class="am-popup-title">添加管理员</h4>
      <span data-am-modal-close
            class="am-close">&times;</span>
    </div>
     <div class="am-popup-bd">

      <form class="am-form tjlanmu">
          <input type="hidden" name="_token" value="{{csrf_token()}}" />
        <div class="am-form-group am-cf">
            <div class="zuo">用户名：</div>
            <div class="you">
                <input type="text" class="am-form-field" v-model="user.name" placeholder="请输入用户名">
                <!-- <p class="am-form-help">会员等级</p> -->
            </div>
        </div>


         <div class="am-form-group am-cf">
            <div class="zuo">密码：</div>
            <div class="you">
                <input type="password" class="am-form-field" v-model="user.password"   placeholder="请输入用密码">
                <!-- <p class="am-form-help">密码</p> -->
            </div>
        </div>
       
        <div class="am-form-group am-cf">
            <div class="zuo">姓名：</div>
            <div class="you">
                <input type="text" class="am-form-field" v-model="user.user_name" placeholder="请输入姓名">
                <!-- <p class="am-form-help">确认密码</p> -->
            </div>
        </div>
      
        <div class="am-form-group am-cf">
            <div class="zuo">电话：</div>
            <div class="you">
                <input type="text" class="am-form-field" v-model="user.phone"  placeholder="请输入电话">
                <!-- <p class="am-form-help">密码</p> -->
            </div>
        </div>

         <div class="am-form-group am-cf">
            <div class="zuo">邮箱：</div>
            <div class="you">
                <input type="text" class="am-form-field" v-model="user.emil"  placeholder="请输入邮箱">
                <!-- <p class="am-form-help">密码</p> -->
            </div>
        </div>

           <div class="am-form-group am-cf">
            <div class="zuo">职位：</div>
            <div class="you">
                <input type="text" class="am-form-field" v-model="user.position" placeholder="请输职位">
                <!-- <p class="am-form-help">密码</p> -->
            </div>
        </div>

        @if(Auth::user()->is_branch !=0)
            <div class="am-form-group am-cf">
             <div class="zuo">公司类型：</div>
                <div class="you" style="margin-top: 3px;">
                  <select v-model="user.is_branch">
                  <option v-for="val in branch" :value="val.id">@{{val.name}}</option>
                  </select>
                 </div>
              <span class="am-form-caret"></span>
            </div>
        @else
              <div class="am-form-group am-cf">
                  <div class="zuo">公司类型：</div>
                  <div class="you" style="margin-top: 3px;">
                      <select v-model="user.is_branch">
                          <option value="0">总公司</option>
                          <option v-for="val in branch" :value="val.id">@{{val.name}}</option>
                      </select>
                  </div>
                  <span class="am-form-caret"></span>
              </div>
          @endif

        <div class="am-form-group am-cf">
          <div class="you">
            <p>
              <button type="button" class="am-btn am-btn-success am-radius" v-on:click="add()">立即添加</button>
              <button type="reset" class="am-btn am-btn-success am-radius">重新填写</button>

            </p>
          </div>
        </div>
      </form>
    </div>

</div>

 <!--修改模态框-->
    <div class="am-popup am-popup-inner" id="my-popup2">
        <div class="am-popup-hd">
            <h4 class="am-popup-title">修改管理员</h4>
            <span data-am-modal-close
                  class="am-close">&times;</span>
        </div>
        <div class="am-popup-bd">

            <form class="am-form tjlanmu">
                <input type="hidden" name="_token" value="{{csrf_token()}}" />
                <div class="am-form-group am-cf">
                    <div class="zuo">用户名：</div>
                    <div class="you">
                        <input type="text" class="am-form-field" v-model="userDetail.name" disabled placeholder="请输入用户名">
                        <!-- <p class="am-form-help">会员等级</p> -->
                    </div>
                </div>


                <div class="am-form-group am-cf">
                    <div class="zuo">密码：</div>
                    <div class="you">
                        <input type="password" class="am-form-field" v-model="userDetail.password"   placeholder="请输入用密码">
                        <!-- <p class="am-form-help">密码</p> -->
                    </div>
                </div>

                <div class="am-form-group am-cf">
                    <div class="zuo">姓名：</div>
                    <div class="you">
                        <input type="text" class="am-form-field" v-model="userDetail.user_name" placeholder="请输入姓名">
                        <!-- <p class="am-form-help">确认密码</p> -->
                    </div>
                </div>

                <div class="am-form-group am-cf">
                    <div class="zuo">电话：</div>
                    <div class="you">
                        <input type="text" class="am-form-field" v-model="userDetail.phone"  placeholder="请输入电话">
                        <!-- <p class="am-form-help">密码</p> -->
                    </div>
                </div>

                <div class="am-form-group am-cf">
                    <div class="zuo">邮箱：</div>
                    <div class="you">
                        <input type="text" class="am-form-field" v-model="userDetail.emil"  placeholder="请输入邮箱">
                        <!-- <p class="am-form-help">密码</p> -->
                    </div>
                </div>

                <div class="am-form-group am-cf">
                    <div class="zuo">职位：</div>
                    <div class="you">
                        <input type="text" class="am-form-field" v-model="userDetail.position" placeholder="请输职位">
                        <!-- <p class="am-form-help">密码</p> -->
                    </div>
                </div>


                <div class="am-form-group am-cf">
                    <div class="you">
                        <p>
                            <button type="button" class="am-btn am-btn-success am-radius" v-on:click="editUserInfo(userDetail.id)">修改</button>
                            <button type="reset" class="am-btn am-btn-success am-radius">重置</button>

                        </p>
                    </div>
                </div>
            </form>
        </div>

    </div>



  <div class="admin-biaogelist">
    <div class="listbiaoti am-cf">
      <ul class="am-icon-flag on"> 管理员列表</ul>
      <dl class="am-icon-home" style="float: right;"> 当前位置： 首页 > <a href="#">管理员列表</a></dl>
      <dl>
        <button type="button" class="am-btn am-round am-btn-xs am-icon-plus" data-am-modal="{target: '#my-popup'}"> 添加管理员</button>
      </dl>
    </div>
    {{--<div class="am-btn-toolbars am-btn-toolbar am-kg am-cf">--}}
      {{--<ul>--}}
        {{--<li><input type="text" class="am-form-field am-input-sm am-input-xm" placeholder="关键词搜索" /></li>--}}
        {{--<li><button type="button" class="am-btn am-radius am-btn-xs am-btn-success" style="margin-top: -1px;">搜索</button></li>--}}
      {{--</ul>--}}
    {{--</div>--}}
    <form class="am-form am-g" @click="systemInitialize()">

      <table width="100%" class="am-table am-table-bordered am-table-radius am-table-striped">
        <thead>
        <tr class="am-success">
          {{--<th class="table-check"><input type="checkbox" /></th>--}}
            <th >用户名</th>
          <th >姓名</th>
          <th >电话</th>
          <th >邮箱</th>
          <th >职位</th>
          <th >是否分公司</th>
          <th >最近登录</th>
          <th >登录/禁止 <i class="am-icon-check am-text-warning"></i> <i class="am-icon-close am-text-primary"></i></th>
          <th >操作</th>
        </tr>
        </thead>
        <tbody>

        @foreach($users as $user)
        <tr>
          <td>{{ $user->name }}</td>
            <td>{{ $user->user_name }}</td>
          <td>{{ $user->phone }}</td>
          <td>{{ $user->emil }}</td>
          <td>{{ $user->position }}</td>
          <td>
            @if($user->is_branch ==0)
            <span>总公司</span>
            @else
            <span>分公司</span>
            @endif
          </td>
          <td>{{ date('Y-m-d H:i:s',$user->login_time)}}</td>
          <td class="am-hide-sm-only">
            <span v-if="user.status == 1"><i class="am-icon-check am-text-warning"></i></span>
            <span v-if="user.status == 2"><i class="am-icon-close am-text-primary"></i></span>
          </td>
          <td>
            <div class="am-btn-toolbar">
                @if(Auth::user()->is_branch ==0)
                <a href="/admin/users/{{$user->id}}/role" class="am-btn am-btn-danger am-radius">授权</a>
                @endif
                <a class="am-btn am-btn-danger am-radius" v-on:click="findsUser({{ $user->id}})" data-am-modal="{target:'#my-popup2'}" >修改</a>
            </div>
          </td>
        </tr>
        @endforeach
        </tbody>
      </table>
      <ul class="am-pagination am-fr">
        <li class="am-disabled"><a href="#">«</a></li>
        <li class="am-active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">»</a></li>
      </ul>
      <hr />
    </form>

 <script>
      var app = new Vue({
          el:"#system",
          data: {
              branch:[],// 分公司列表
              user:{
                  name:'',
                  user_name:'',
                  emil:'',
                  phone:'',
                  position:'',
                  password:'',
                  is_branch:0
              },
              //用户信息
              userDetail:[]
          },
          //事件
          methods: {
              //分公司
              initialize:function () {                  
                  $.get("/admin/system/getBranch",{class:'select'},function (res) {
                      if(res.code){
                          app.branch = res.data
                      } else {
                          layer.msg(res.data);
                      }
                  });
              },
              //添加管理员
            add:function(){
                $.post("/admin/users/store",{'_token':'{{csrf_token()}}',user:app.user},function (res) {
                    if(res.code){
                        layer.msg(res.data);
                    } else {
                        layer.msg(res.data);
                    }
                });
            },
            //修改查询
              findsUser:function(id){
                  $.get("/admin/users/editUser",{'_token':'{{csrf_token()}}',id:id ,class:'find',},function (res) {
                      if(res.code){
                        app.userDetail = res.data;
                      } else {
                          layer.msg(res.data);
                      }
                  });
              },
            //修改管理员
              editUserInfo:function(id){
                  $.get("/admin/users/editUser",{'_token':'{{csrf_token()}}',userDetail:app.userDetail,class:'edit',id:id},function (res) {
                      if(res.code){
                          layer.msg(res.data);
                      } else {
                          layer.msg(res.data);
                      }
                  });
              }
             }, 
          //自动执行
          mounted: function () {
              this.initialize();
          },
      })
  </script>    
@include('Admin.public.foot')